---
id: diagrams
title: Diagrams
description: Writing diagrams with Mermaid
sidebar_position: 3
---

import BrowserWindow from '@site/src/theme/BrowserWindow';

# Diagrams

Diagrams can be rendered using [Mermaid](https://mermaid-js.github.io/mermaid/) in a code block.
rise4fun enables diagrams by default.

## Usage {#usage}

Add a code block with language `mermaid`:

````markdown title="Example Mermaid diagram"
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
````

<BrowserWindow>

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

</BrowserWindow>

See the [Mermaid syntax documentation](https://mermaid-js.github.io/mermaid/#/./n00b-syntaxReference) for more information on the Mermaid syntax
and the [Docusaurus Diagram documentation](https://docusaurus.io/docs/markdown-features/diagrams).

## Configuration

To disable Math, use with `mermaid: false` in rise4fun configuration.
